<template>
    <view class="bg-gray" style="height: 100vh;">
		
		<!-- 小程序顶部样式 -->
		<cu-custom bgColor="bg-gradual-orange" :isBack="false">
			<block slot="left">
				<text @tap="toPage()" class="cuIcon-homefill" style="font-size: 40rpx;"></text>
			</block>
			<block slot="content">个人中心</block>
		</cu-custom>
		
		
		<view>
			<!-- 未授权状态 -->
			<view v-if="userInfo == null || userInfo.nickName == undefined" class="flex justify-center flex-direction align-center margin-top">
				<image mode="aspectFit" src="/static/img/qq.png" style="width: 200upx;height: 200upx;"></image>
				<button style="margin-top: 20upx;background-color: green;width: 90%;" type="primary" class="primary" open-type="getUserInfo" @getuserinfo="onGotUserInfo" >微信授权登陆</button>
				<button v-if="needSetting" style="margin-top: 20upx;background-color: green;width: 90%;color: white;" type="default" class="primary" open-type="openSetting" bindopensetting="callbackSetting" >授权登陆获取位置信息</button>

				<view class="flex-item" style=";font-size: 30upx;text-align: center;">
					登陆即表示同意<text style="color: #0FAEFF;">《卡修用户协议》</text>
				</view>
			</view>
			<!-- 已授权 -->
			<view v-else-if="userInfo && userInfo.nickName">
				<!-- 未认证 -->
				<view v-if="!userInfo.auditStatus" class="flex justify-center flex-direction align-center" style="height: 90vh;">
					<text style="font-size: 50rpx;color: #8F8F94;font-weight: bold;margin-bottom: 50rpx;">
						您还未认证
					</text>
					<button @tap="attestation" type="default" style="border: solid 3upx #0081ff; background-color: white;color: #0081ff;width: 300upx;border-radius: 0upx;font-size: 30upx;border-radius: 10rpx;">立即认证</button>
				</view>
				<!-- 认证中 -->
				<view v-else-if="userInfo.auditStatus == 'CERTIFICATING'" class="flex justify-center flex-direction align-center" style="height: 90vh;">
					<text style="font-size: 50rpx;color: #8F8F94;font-weight: bold;margin-bottom: 50rpx;">
						认证中
					</text>
				</view>
				<!-- 已认证,可以加载个人中心了 -->
				<view v-else-if="userInfo.auditStatus == 'CERTIFIED'">
					
					<view class="flex justify-center flex-direction align-center margin-top solid-bottom padding-top-sm padding-bottom-sm" style="background-color: white">
						<image mode="aspectFit" :src="userInfo.avatar" style="width: 200upx;height: 200upx;border-radius: 50%;"></image>
						<view class="flex-item margin-top" style=";font-size: 30upx;text-align: center;">
							{{ userInfo.nickName }}
						</view>
					</view>
					
					<view>
						<view class="cu-list menu card-menu margin-top">
							<view @tap="toOrders" class="cu-item arrow">
								<view class="content">
									<text class="cuIcon-circlefill text-grey"></text>
									<text class="text-grey">订单中心</text>
								</view>
							</view>
						</view>
						<view class="cu-list menu card-menu ">
							<view @tap="toAccount" class="cu-item arrow">
								<view class="content">
									<text class="cuIcon-circlefill text-grey"></text>
									<text class="text-grey">账户</text>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		
    </view>
</template>

<script>
	
    import {
        mapState,
        mapMutations
    } from 'vuex'
	
    export default {
        components: {
        },
        data() {
            return {
				userInfo: {}
            }
        },
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo")
		},
        methods: {
			toPage(){
				uni.redirectTo({
					url: '../main/main'
				})
			},
			toOrders(){
				uni.navigateTo({
					url: '../orders/orders'
				})
			},
			toAccount(){
				uni.navigateTo({
					url: '../account/account'
				})
			},
			callbackSetting(val){
				console.log(val)
			},
			attestation(){
				uni.navigateTo({
					url: '../attestation/attestation'
				})
			},
			onGotUserInfo(val){
				if(val && val.target && val.target.errMsg && val.target.errMsg.toString().indexOf('ok') == -1){
					// 授权失败
					uni.showModal({
						title: '请授权',
						content: '授权失败可能会无法使用小程序！',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					let token = uni.getStorageSync('token')
					if(!token){
						let that = this
						uni.login({
							success(loginRes) {
								that.$api.getSessionKey({code: loginRes.code}).then((loginValue)=>{
									//获取并初始化token
									that.token = loginValue.data.data
									uni.setStorageSync('token', loginValue.data.data)
									that.getUserInfoApi(val)
								}).catch((err)=>{
									console.log('request fail', err);
								})
							}, 
						})
					}else {
						this.getUserInfoApi(val)
					}
				}
			},
			getUserInfoApi(val){
				// 获取用户信息
				this.$api.getUserInfo({
					signature: val.target.signature,
					rawData: val.target.rawData,
					iv: val.target.iv,
					encryptedData: val.target.encryptedData,
				}).then((res)=>{
					uni.setStorageSync("userInfo", res.data.data);
					uni.reLaunch({
						url: '../main/main'
					})
				}).catch((err)=>{
					console.log('request fail', err);
				})
			},
			toOrderList(){
				uni.navigateTo({
					url: '../orders/orders'
				})
			}
        },
        onReady() {
        }
    }
</script>

<style>
    
</style>
